<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 相册
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-input placeholder="例:校园风采"
                  class="handle-input mr10"
                  v-model="pdesc"></el-input>
        <el-button type="primary"
                   icon="el-icon-search"
                   @click="handleSearch">搜索</el-button>
      </div>
      <!-- 相册展示 -->
      <el-row>
        <el-col :span="5"
                v-for="(p, index) in photos"
                :key="index"
                :offset="index > 0 ? 1 : 0">
          <el-card :body-style="{ padding: '0px' }"
                   shadow="hover">
            <img :src=p.img[0]
                 class="image">
            <div style="padding: 14px;">
              <span>{{p.content}}</span>
              <div class="bottom clearfix">
                <time class="time">{{ p.time }}</time>
                <el-button type="text"
                           class="button"
                           @click="detail(p)">查看详情</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <!-- 分页导航 -->
      <div class="pagination">
        <el-pagination background
                       layout="total, prev, pager, next"
                       :current-page="query.pageIndex"
                       :page-size="query.pageSize"
                       :total="pageTotal"
                       @current-change="handlePageChange"></el-pagination>
      </div>
      <!-- 相册详情 -->

      <el-dialog title="相册详情"
                 :visible.sync="dialogFormVisible">
        <div style="text-align:right">
          <el-button type="danger"
                     @click="delphoto()">删除相册</el-button>
          <el-button type="primary"
                     @click="showcomment">查看评论</el-button>
        </div>
        <el-form :model="form">
          <el-form-item label="相册描述">
            <el-input v-model="form.name"
                      autocomplete="off"></el-input>
          </el-form-item>
          <div class="demo-image__preview">
            <div class="demo-image__lazy">
              <el-image v-for="url in urls"
                        :key="url"
                        :src="url"
                        lazy></el-image>
            </div>
          </div>
        </el-form>
        <div slot="footer"
             class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 查看评论 -->
      <el-drawer title="评论详情"
                 :visible.sync="drawer"
                 :direction="direction"
                 :before-close="handleClose">
        <span>
          <div v-for="(d, index) in discuss"
               :key="index">
            <el-collapse >
              <!-- 循环展示一级评论 -->
              <!-- 头像 -->
              <div class="block"
                   v-if="d.pid==0||d.pid==null">
                <el-avatar :size="40"
                           :src=d.parent.avar></el-avatar>
                <!-- 昵称 -->
                {{d.parent.name}}
              </div>
              <el-collapse-item :title=d.content
                                name="1"
                                v-if="d.pid==0||d.pid==null">
                <!-- 循环展示二级评论 -->
                <div v-for="(d1, index) in discuss"
                     :key="index">
                  <!-- 评论内容 -->
                  <div v-if="d1.floor==d.floor&&d1.pid!=null">
                    <div class="block">
                      <el-avatar :size="25"
                                 :src=d1.parent.avar></el-avatar>
                      <!-- 昵称 -->
                      {{d1.parent.name}} 评论 @{{d1.pdiscuss.parent.name}}:{{d1.pdiscuss.content}}
                    </div>
                    {{d1.content}}
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </span>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import { fetchData } from '../../api/index';
export default {
    name: 'photolist',
    data() {
        return {
            //头像
            circleUrl: '',
            //评论集合
            discuss: [],
            //当前相册
            p: {},
            //评论需要
            drawer: false,
            direction: 'rtl',
            //评论集合
            comment: [],
            //图片集合
            urls: [],
            //模糊查询
            pdesc: '',
            //相册对象
            photos: [],
            //查询用对象
            photo: {},
            // 是否显示详情
            dialogFormVisible: false,
            //分页显示
            query: {
                address: '',
                name: '',
                pageIndex: 1,
                pageSize: 10
            },
            tableData: [],
            multipleSelection: [],
            delList: [],
            editVisible: false,
            pageTotal: 0,
            form: {},
            idx: -1,
            id: -1
        };
    },
    created() {
        this.$axios('/photo/admin/all/1/1/4').then((r) => {
            this.query.pageIndex = r.data.data.currPage;
            this.query.pageSize = r.data.data.pageSize;
            this.pageTotal = r.data.data.totalNums;
            this.photos = r.data.data.data;
            console.log(r.data.data.data);
        });
    },
    methods: {
      //删除相册
      delphoto(){
        this.$axios.post('/photo/admin/delete',this.p).then(r=>{
          this.$axios('/photo/admin/all/1/1/4').then((r) => {
                    this.query.pageIndex = r.data.data.currPage;
                    this.query.pageSize = r.data.data.pageSize;
                    this.pageTotal = r.data.data.totalNums;
                    this.photos = r.data.data.data;
                });
          this.dialogFormVisible=false
        })
      },
        //显示评论
        showcomment() {
            this.drawer = true;
            this.$axios.get('photo/admin/alldiscuss/' + this.p.id).then((r) => {
                this.discuss = r.data.data;
                console.log(r.data.data);
            });
        },
        //关闭评论
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then((_) => {
                    done();
                })
                .catch((_) => {});
        },
        //查看相册详情
        detail(p) {
            this.dialogFormVisible = true;
            this.form.name = p.content;
            this.p = p;
            this.urls = p.img;
        },
        // 触发搜索按钮
        handleSearch() {
            (this.photo.content = this.pdesc), (this.photo.time = this.value1), (this.photo.managerId = 1); //用户id
            this.$axios.post('/photo/admin/like/1/4', this.photo).then((r) => {
                this.query.pageIndex = r.data.data.currPage;
                this.query.pageSize = r.data.data.pageSize;
                this.pageTotal = r.data.data.totalNums;
                this.photos = r.data.data.data;
            });
        },
        // 分页导航
        handlePageChange(val) {
            if (this.pdesc != '') {
                this.$axios.post('/photo/admin/like/' + val + '/4', this.photo).then((r) => {
                    this.query.pageIndex = r.data.data.currPage;
                    this.query.pageSize = r.data.data.pageSize;
                    this.pageTotal = r.data.data.totalNums;
                    this.photos = r.data.data.data;
                });
            } else {
                this.$axios('/photo/admin/all/1/' + val + '/4').then((r) => {
                    this.query.pageIndex = r.data.data.currPage;
                    this.query.pageSize = r.data.data.pageSize;
                    this.pageTotal = r.data.data.totalNums;
                    this.photos = r.data.data.data;
                });
            }
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.time {
    font-size: 13px;
    color: #999;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
}

.button {
    padding: 0;
    float: right;
}

.image {
    width: 100%;
    display: block;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: '';
}

.clearfix:after {
    clear: both;
}
</style>
